import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './Login.module.css';

export default function Register() {
    const navigate = useNavigate();
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [msg, setMsg] = useState('');

    const handleRegister = () => {
        if (!username || !password || !confirmPassword) {
            setMsg('请填写完整信息');
            return;
        }
        if (password !== confirmPassword) {
            setMsg('两次输入的密码不一致');
            return;
        }
        setMsg('注册成功，请返回登录');
        setTimeout(() => navigate('/login'), 1500);
    };

    return (
        <div className={styles['login-bg']}>
            <div className={styles['login-container']}>
                <div className={styles['login-title']}>用户注册</div>
                <input
                    className={styles['login-input']}
                    type="text"
                    placeholder="请输入用户名"
                    value={username}
                    onChange={e => setUsername(e.target.value)}
                />
                <input
                    className={styles['login-input']}
                    type="password"
                    placeholder="请输入密码"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                />
                <input
                    className={styles['login-input']}
                    type="password"
                    placeholder="请再次输入密码"
                    value={confirmPassword}
                    onChange={e => setConfirmPassword(e.target.value)}
                />
                <button className={styles['login-btn']} onClick={handleRegister}>注 册</button>
                {msg && <div className={styles['login-error']}>{msg}</div>}
                <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
                    <span
                        style={{ color: '#1976d2', fontSize: 14, cursor: 'pointer', textDecoration: 'underline' }}
                        onClick={() => navigate('/login')}
                    >
                        返回登录
                    </span>
                </div>
            </div>
        </div>
    );
}
